<style>
.head_stage{
  position: relative;
  border-bottom: 1px solid rgba(6,15,26,0.07);
  z-index: 50;
  user-select: none;
  background: white;
}
.head_cnt{
  width: 100%;
  max-width: 1024px;
  padding: 14px 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  white-space: nowrap;
  justify-content: space-between;
  position: relative;
}
.head_cnt_nav {
  transition: all 0.15s;
  display: flex;
  margin: 0 auto;
  align-items: center;
  white-space: nowrap;
  top: 65px;
  z-index: 60;
  margin-right: 50px;
  background: white;
}
.head_cnt_nav .nav_item{
  font-size: 16px;
  color: #10141A;
  margin-left: 16px;
  align-items: center;
  justify-content: center;
  display: flex;
  width: 60px;
  height: 100%;
  cursor: pointer;
}
.head_actions{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
.head_actions_icon{
  margin-right: 16px;
  cursor: pointer;
}
.head_actions .search{
  height: 36px;
  margin-right: 16px;
  position: relative;
  z-index: 2;
}
.head_actions .search .search-placeholder{
  height: 36px;
  align-items: center;
  justify-content: center;
  display: flex;
}
.head_actions .search .search-icon{
  display: inline-block;
  background-image: url(https://wwcdn.weixin.qq.com/node/wework/images/202201061753.bd4d6ef977.svg);
  background-size: 20px 20px;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  width: 20px;
  height: 36px;
}
.head_actions .search .search-wrapper{
  position: absolute;
  border-radius: 2px;
  top: 0;
  background-color: #F6F6F6;
  height: 36px;
  width: 500px;
  align-items: center;
  padding-left: 12px;
  right: 8px;
  transition: linear 0.3s;
  display: none;
}
.head_actions .search .search-icon{
  display: inline-block;
  background-image: url(https://wwcdn.weixin.qq.com/node/wework/images/202201061753.bd4d6ef977.svg);
  background-size: 20px 20px;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  width: 20px;
  height: 36px;
}
.head_actions .search .search-box{
  flex: 1;
  margin-left: 12px;
}
.head_actions .search .search-input[data-v-60457873] {
  background-color: transparent;
  border: 0 none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 22px;
  flex: 1;
  height: 30px;
  box-sizing: border-box;
  outline: 0 none;
  border: 0 none;
  background-color: transparent;
  width: 100%;
}
.head_actions .head_actions_avator {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;
}
.head_link{
  display: block;
  flex: 0 0 auto;
}
.head_logo {
  display: block;
  width: 120px;
  height: 42px;
}
.head_sep {
  flex: 0 0 auto;
  margin: 0 14px;
  height: 16px;
  border-left: 1px solid black;
}
.head_title{
  margin-right: 14px;
  font-size: 22px;
  line-height: 42px;
  color: black;
  text-decoration: none;
}
.link_card_wrapper{
  display: block;
  text-decoration: none;
  width: 100%;
  background: white;
  border: 1px solid rgba(-1,15,26,0.07);
  box-sizing: border-box;
  border-radius: 6px;
  height: 342px;
  max-width: 244px;
  flex: 1;
  padding: 24px 24px 28px;
  text-align: center;
  box-shadow: 0 0 0 white;
  transform: translateY(0px);
  cursor: pointer;
  transition: all linear 0.2s;
}
.link_card_icon{
  width: 196px;
  height: 152px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 128px 128px;
  text-align: center;
  background-color: #F5F6F7;
  margin: 0 auto;
}
.link_card_content{
  background: white;
  color: #fff;
}
.link_card_title{
  color: #10141A;
  height: 22px;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  margin: 20px 0 8px;
  text-align: left;
}
.link_card_desc{
  font-size: 14px;
  line-height: 22px;
  color: rgba(11,18,26,0.6);
  word-break: break-all;
  text-align: justify;
}
.my-custom-class .ivu-poptip-arrow {
  display: none;
}
.my-checkbox-group-class .ivu-checkbox-group{
  display: flex;
  flex-direction: column;
  margin-top: 5px;
  align-items: baseline;
  overflow: auto;
}
.navList_item {
  align-items: center;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  display: flex;
  padding: 8px 16px;
  color: #000;
  text-decoration: none;
  border-radius: 4px;
  margin-right: 8px;
  transition: color 0.1s linear;
}
</style>
<template>
  <div style="width: 100%;height: 100vh;">
    <div style="width: 100%;height: 100%;display: flex;flex-direction: column;">
      <header class="head_stage">
        <div class="head_cnt">
          <div style="display: flex;align-items: center;">
            <a href="http://172.30.53.223:8080" class="head_link">
              <img src="https://test.longdaoyun.com/staticfile/images/common/logo.png" class="head_logo">
            </a>
            <div class="head_sep"></div>
            <a  href="" class="head_title">运维管理平台</a>
          </div>
          <div style="display: flex;justify-content: flex-end;">
            <div class="head_cnt_nav">
              <div class="nav_item">学习与帮助
              </div>
            </div>
            <div class="head_actions">
              <img src="https://wx.qlogo.cn/mmhead/Q3auHgzwzM6dzicQgY8RiaIXZbdyms2W31nZB3dwcfUoUMbb2J3ob1jQ/0" class="head_actions_avator">
            </div>
          </div>
        </div>
      </header>
      <div style="flex-grow: 1;overflow-y:scroll;position: relative;background-color:#F5F6F7">
        <div style="padding-bottom:20px">
          <div style="padding: 24px 0 40px 0;">
            <div style="width: 1024px; margin: 0 auto; display: flex;justify-content: space-between;flex-direction: column">
              <div style="color: #333;position: relative;">
                  <div style="text-align:center;width: 100%; position: relative;background-position: 50%;background-size: cover;background-color: white;">
                    <div style="padding: 2.5rem">
                      <div style="display: flex;position: relative;height: 100%">
                        <a class="navList_item">全部</a>
                        <a>地址查询</a>
                        <a>应用端口口号</a>
                      </div>
                      <header style="margin-bottom: 1.5rem;    display: flex;justify-content: space-between;flex-wrap: wrap;gap: 2rem;">
                        <h2 style="font-size: 1.5rem;line-height: 1.75rem;font-weight: 400; color: #111;margin-bottom: 0;margin-top: 6px;">地址查询</h2>
<!--                        <div style="display: inline-flex; align-items: center; justify-content: center;">-->
<!--                          <Poptip trigger="hover" content="返回首页" placement="left">-->
<!--                            <Button  style="width: 2rem; height: 2rem; background-color: #f0f0f0; border: none; justify-content: center; border-radius: 50%; display: flex; align-items: center;">-->
<!--                              <i style="padding: 0;">-->
<!--                                <Icon type="md-arrow-back" />-->
<!--                              </i>-->
<!--                            </Button>-->
<!--                          </Poptip>-->
<!--                        </div>-->
                      </header>
                      <div style="margin: 0;padding: 0;">
                        <div style="background-color: #f0f0f0;padding: 1.5rem 40px;margin: 1rem -40px;">
                          <form style="display: flex; flex-wrap: wrap;justify-content: space-between; align-items: center; gap: 1rem;">
                            <div style="flex-grow: 1;margin-left: 0; width: auto">
                              <div style="height: 2rem;line-height: 2rem;    position: relative;    font-size: 13px;">
                                <Input  v-model="keyword" clearable	  @on-search="searchData" @on-clear="clearInput"  enter-button style="line-height: 32px;;width:100%" search placeholder="平台名称关键字搜索" />
                              </div>
                            </div>
                            <div style="flex-grow: 1;margin-left: 0; width: auto">
                              <div style="height: 2rem;line-height: 2rem;    position: relative;    font-size: 13px;">
                                <Select   v-model="model" style="line-height: 32px;;width:100%">
                                  <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                              </div>
                            </div>
                            <div style="flex-grow: 1;margin-left: 0; width: auto">
                              <div style="height: 2rem;line-height: 2rem;position: relative;font-size: 13px;">
                                <Select  v-model="container"  placeholder="部署方式" style="line-height: 32px;;width:100%">
                                  <Option v-for="item in containerList"  :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                                <span style="color: #c0c4cc;">
                                  <span style="pointer-events: all;">
                                    <i style="color: #111;    line-height: 2rem;    position: relative;text-align: right;width: 1rem;"></i>
                                  </span>
                                </span>
                              </div>
                            </div>
                            <div style="flex-grow: 1;display: flex;gap: 1rem">
                              <div style="height: 2rem;line-height: 2rem;position: relative;font-size: 13px;width: 60%">
                                <Select    v-model="platformType"  placeholder="平台类型" style="line-height: 32px;;width:100%">
                                  <Option v-for="item in platformList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                              </div>
<!--                              <Button @click="showPoptip" style="background-color: transparent; border: none;">-->
<!--                              </Button>-->
                              <Poptip  class="my-checkbox-group-class" ref="myPoptip" placement="bottom-end" title="可以在这里进行列的编辑操作：" content="您可以在这里进行列的编辑操作" popper-class="my-custom-class">
                                <Button  disabled @click="addColumns">
                                  <i style="padding-left: 5px; margin-right: 2px">
                                  <Icon size="15" type="md-create" /></i>编辑列
                                </Button>
                                <template #content>
                                  <Input   search placeholder="Enter something..." />
                                  <CheckboxGroup  v-model="selectedItems"  style="height: 200px;width: 250px;">
                                    <Checkbox style="margin-top: 3px;font-size: 13px"  v-for="item in items" :label="item" :key="item">{{ item }}</Checkbox>
                                  </CheckboxGroup>
                                  <div style="text-align: left;margin-top:15px">
                                    <Button @click="resetColumns">恢复默认</Button>
                                  </div>
                                  <Divider size="small"/>
                                  <div style="text-align: right">
                                    <Button type="primary" @click="confirmColumnSelection">确定</Button>
                                    <Button @click="closePoptip">取消</Button>
                                  </div>
                                </template>
                              </Poptip>
                            </div>
                          </form>
                        </div>
                        <div style="max-width: 100%;overflow-x: auto; white-space: nowrap;">
                          <div>
                            <Table  :columns="columns" :data="data"></Table>
                          </div>
                          <div class="pagination-container">
                            <p class="main-total">共{{ total }}条数据</p>
                            <Page :total="total" :current.sync="currentPage" @on-change="handlePageChange"></Page>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div >
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: 'AddressList',
  data() {
    return {
      data: [],
      nginx_config: '',
      total: 0, // 总记录数
      currentPage: 1, // 当前页码
      keyword: '',
      modal1: true, //弹窗默认关闭
      modal2: false, //弹窗默认关闭
      currentPlatform: '',// 初始值为空字符串
      model: '',
      container: '',
      platformType: '',
      poptipVisible: false, // 记录Poptip的可见状态
      // selectedItems: ['平台名称','平台首页','Jenkins地址','Jenkins用户','Jenkins密码'], // 存储选中的多选框的值的数组
      // selectedItems: ['平台名称','平台首页','部署日期','部署方式','平台类型'], // 存储选中的多选框的值的数组
      // items: ['平台名称','平台首页','部署日期','部署方式','平台类型','Jenkins地址','Jenkins用户','Jenkins密码','模板配置地址',
      //   '模板配置账号','模板配置密码','Dubbo监控','Dubbo账号','Dubbo密码','Rancher地址',
      //   'Rancher账号','Rancher密码', 'Eureka地址','Eureka用户','Eureka密码',
      //   'Rocketmq监控','Rocketmq用户名','Rocketmq密码','运行环境','Hosts解析','Nginx配置'], // 所有可选的列
      columns: [
        {type: 'selection', width: 60, align: 'center', fixed: 'left'},
        { title: '平台名称', key: 'environment',align: 'center',fixed: 'left',width:150},
        { title: '平台首页地址', key: 'index',align: 'center',width:200},
        { title: '部署日期', key: 'deploy_date',align: 'center',width:130},
        { title: 'Jenkins地址', key: 'jenkinsAddress',align: 'center',width:160},
        { title: 'Jenkins用户', key: 'jenkins_user' ,align: 'center',width:120},
        { title: 'Jenkins密码', key: 'jenkins_pwd',align: 'center',width:150},
        { title: '模板配置地址', key: 'template',align: 'center',width:150},
        { title: '模板配置账号', key: 'template_user',align: 'center',width:150},
        { title: '模板配置密码', key: 'template_pwd',align: 'center',width:150},
        { title: 'Dubbo监控', key: 'dubbo',align: 'center',width:210},
        { title: 'Dubbo账号', key: 'dubbo_user' ,align: 'center',width:150},
        { title: 'Dubbo密码', key: 'dubbo_pwd',align: 'center',width:160},
        { title: 'Rancher地址', key: 'rancher',align: 'center',width:220},
        { title: 'Rancher账号', key: 'rancher_user',align: 'center',width:220},
        { title: 'Rancher密码', key: 'rancher_pwd',align: 'center',width:220},
        { title: 'Eureka地址', key: 'eureka',align: 'center',width:165},
        { title: 'Eureka用户', key: 'eureka_user',align: 'center',width:160},
        { title: 'Eureka密码', key: 'eureka_pwd',align: 'center',width:150},
        { title: 'Rocketmq监控', key: 'rocketmq',align: 'center',width:160},
        { title: 'Rocketmq用户名', key: 'rocketmq_user',align: 'center',width:160},
        { title: 'Rocketmq密码', key: 'rocketmq_pwd',align: 'center',width:150},
        { title: 'Nacos', key: 'Nacos',align: 'center',width:150},


        {
          title: 'Hosts解析',
          align: 'center',
          width:100,
          render: (h, { row: item }) => {
            return h('div', { style: 'display: flex; justify-content: center;' }, [
              h('Button', {
                props: { type: 'primary' },
                on: { click: () => this.showLocalAnalysis(item.environment) }
              }, '查看')
            ]);
          }
        },
        // {
        //   title: 'Nginx配置',
        //   key:'nginx_config',
        //   align: 'center',
        //   width:100,
        //   render: (h, { row: item }) => {
        //     return h('div', { style: 'display: flex; justify-content: center;' }, [
        //       h('Button', {
        //         props: { type: 'primary' },
        //         on: {
        //           click: () => {
        //             this.nginx_config = item.nginx_config;
        //             this.showLocalAnalysisModal2(item.environment);
        //           }
        //         }
        //       }, '查看')
        //     ]);
        //   }
        // },
      ],
      cityList: [],
      containerList: [
        {
          value: '1',
          label: "全部"
        },
        {
          value: '2',
          label: "容器"
        },
        {
          value: '3',
          label: "虚拟机"
        }
      ],
      platformList: [
        {
          value: "1",
          label: "全部"
        },
        {
          value: "2",
          label: "私有云"
        },
        {
          value: "3",
          label: "本地化"
        }
      ]
    };
  },
  mounted() {
    this.fetchData();
  },
  computed: {
    getDynamicColumns() {
      // return this.columns.filter(column => this.selectedItems.includes(column.values));
      const dynamicColumns = this.columns.filter(column => this.selectedItems.includes(column.title));
      console.log('动态列的值:', dynamicColumns); // 记录动态列的值
      return dynamicColumns;
    }
  },
  methods: {
    fetchData() {
      const pageSize = 10; // 每页显示的记录数
      // 根据当前页码计算获取数据的起始索引
      const startIndex = (this.currentPage - 1) * pageSize;
      axios
          .get(`http://172.30.53.223:8888/api/items?startIndex=${startIndex}&pageSize=${pageSize}&keyword=${this.keyword}`)
          .then((response) => {
            this.responseData = response.data;

            if (response.data.items === null) {
              this.data = [];
              this.total = 0;
            } else {
              this.data = response.data.items.map((item) => ({
                id: item.ID,
                environment: item.Env,
                index: item.Index,
                deploy_date: item.Deploy_Date,
                jenkinsAddress: item.Jenkins,
                jenkins_user: item.Jenkins_user,
                jenkins_pwd: item.Jenkins_pwd,
                template: item.Template,
                template_user: item.Template_user,
                template_pwd:item.Template_pwd,
                rancher: item.Rancher,
                rancher_user:item.Rancher_user,
                rancher_pwd:item.Rancher_pwd,
                eureka: item.Eureka,
                eureka_user: item.Eureka_user,
                eureka_pwd: item.Eureka_pwd,
                dubbo: item.Dubbo,
                dubbo_user: item.Dubbo_user,
                dubbo_pwd: item.Dubbo_pwd,
                rocketmq: item.Rocketmq,
                rocketmq_user: item.Rocketmq_user,
                rocketmq_pwd: item.Rocketmq_pwd,
                Nacos: item.Nacos,
                eureka_hosts: item.Eureka_hosts,
                nacos_hosts: item.Nacos_hosts,
                zookeeper_hosts:item.Zookeeper_hosts,
                rocketmq_hosts:item.Rocketmq_hosts,
                k8s_master_ip: item.K8s_master_ip,
                redis_hosts: item.Redis_hosts,
                emqtt_hosts:item.Emqtt_hosts,
                emqtt_ip:item.Emqtt_ip,
                nginx_config: item.Nginx_config,
                nginx_condif_menu: item.Nginx_config_menu,
                analysis:item.Analysis,
                more: '',
              }));
              this.total = response.data.total;
            }
          })
          .catch((error) => {
            console.error(error);
          });
    },
    handlePageChange(newPage) {
      this.currentPage = newPage;
      this.fetchData();
    },
    searchData() {
      this.currentPage = 1; // 重置当前页为第一页
      this.fetchData();
    },
    clearInput() {
      this.keyword = ''; // 清空关键字
      this.fetchData(); // 重新获取数据
    },
    showLocalAnalysis(environment) {
      this.currentPlatform = environment; // 设置当前平台变量
      this.modal1 = true; // 打开模态框
    },
    showLocalAnalysisModal2(environment) {
      this.currentPlatform = environment; // 设置当前平台变量
      this.modal2 = true; // 打开模态框
    },
    getEnvironmentData() {
      // 使用当前平台变量 currentPlatform 来获取对应的环境数据
      const environmentData = this.data.find((item) => item.environment === this.currentPlatform);
      return {
        analysis:environmentData ? environmentData.analysis : '',
        ip: environmentData ? environmentData.k8s_master_ip : '',
        eureka: environmentData ? environmentData.eureka_hosts : '',
        nacos: environmentData ? environmentData.nacos_hosts : '',
        zookeeper: environmentData ? environmentData.zookeeper_hosts : '',
        redis: environmentData ? environmentData.redis_hosts : '',
        emqtt: environmentData ? environmentData.emqtt_hosts : '',
        emqtt_ip:environmentData ? environmentData.emqtt_ip : '',
        rocketmq: environmentData ? environmentData.rocketmq_hosts : '',
      };
    },
    //确定按钮
    confirmColumnSelection() {
      console.log("选中的字段：",this.selectedItems);        // 打印选中的字段
      this.$refs.myPoptip.visible = false;    //关闭弹窗
    },

    //取消按钮
    closePoptip() {
      // this.selectedItems = ['平台名称','平台首页','Jenkins地址','Jenkins用户','Jenkins密码',];
      this.$refs.myPoptip.visible = false;  //关闭弹窗
    },

    //恢复默认按钮
    resetColumns() {
      this.selectedItems = ['平台名称','平台首页','部署日期','部署方式','nacos',];
    },

    //
    addColumns() {
    }
  },

}
</script>
